<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashboard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="static/css/global.css">
	<link rel="stylesheet" href="static/css/main.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_978885_29cu5kb39fk.css">
	<link rel="stylesheet" href="static/css/gridstack.min.css">
	<style>
		.layui-form-item {
			margin-bottom: 0px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="drag-active">
			<i class="iconfont  icon-unlocked btn-disabled-drag" title="锁定"></i>
			<i class="iconfont icon-lock  btn-enable-drag" title="解锁"></i>
		</div>
		<div class="ui-component">
			<ul>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">三格菜单</label>
							<div class="layui-input-block">
								<input id="drag_1" type="checkbox" lay-skin="switch" data-id="1" lay-text="ON|OFF">
							</div>
						</div>
					</div>
					
					
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">代办事项</label>
							<div class="layui-input-block">
								<input id="drag_2" type="checkbox" lay-skin="switch" data-id="2" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">考核结果</label>
							<div class="layui-input-block">
								<input id="drag_3" type="checkbox" lay-skin="switch" data-id="3" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">季度考核</label>
							<div class="layui-input-block">
								<input id="drag_4" type="checkbox" lay-skin="switch" data-id="4" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">减分占比</label>
							<div class="layui-input-block">
								<input id="drag_5" type="checkbox" lay-skin="switch" data-id="5" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">考核情况</label>
							<div class="layui-input-block">
								<input id="drag_6" type="checkbox" lay-skin="switch" data-id="6" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">代签事项</label>
							<div class="layui-input-block">
								<input id="drag_7" type="checkbox" lay-skin="switch" data-id="7" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">考核排行</label>
							<div class="layui-input-block">
								<input id="drag_8" type="checkbox" lay-skin="switch" data-id="8" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">最差指标</label>
							<div class="layui-input-block">
								<input id="drag_9" type="checkbox" lay-skin="switch" data-id="9" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">8格菜单</label>
							<div class="layui-input-block">
								<input id="drag_10" type="checkbox" lay-skin="switch" data-id="10" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">待办事项</label>
							<div class="layui-input-block">
								<input id="drag_11" type="checkbox" lay-skin="switch" data-id="11" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">超期未完成</label>
							<div class="layui-input-block">
								<input id="drag_12" type="checkbox" lay-skin="switch" data-id="12" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">异常指标</label>
							<div class="layui-input-block">
								<input id="drag_13" type="checkbox" lay-skin="switch" data-id="13" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">考核结果</label>
							<div class="layui-input-block">
								<input id="drag_14" type="checkbox" lay-skin="switch" data-id="14" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">排名结果</label>
							<div class="layui-input-block">
								<input id="drag_15" type="checkbox" lay-skin="switch" data-id="15" lay-text="ON|OFF">	
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<div class="layui-row">
			<div id="grid-stack" class="grid-stack"></div>
		</div>
		
	</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="static/js/echarts.common.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
<script type="text/javascript" src="static/js/gridstack.min.js"></script>

<script type="text/javascript" src="static/js/gridstack.jQueryUI.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.config({
  	base: 'static/js/' 
}).extend({
  	domConfig: 'domConfig'
});

layui.use(['layer', 'form', 'element','domConfig'], function(){
  	var layer = layui.layer, form = layui.form, element = layui.element,domConfig = layui.domConfig
	// // 拖拽组件
	$(function () {
		var layPop
		domConfig.init()// init(params)可传入具体的用户角色 admin 或 user 
		$('.btn-disabled-drag').on('click',function(){ // 保存
			$(this).hide()
			$('.btn-enable-drag').show()
			layer.closeAll()
			domConfig.disableGrid() // 禁用拖动
			domConfig.serializedData() // 保存widget 位置信息
		})
		$('.btn-enable-drag').on('click',function(){
			$(this).hide()
			layPop = layer.open({
				type: 1, 
				shade: 0,
				title: '菜单',
				closeBtn: 0,
				resize: false,
				content: $('.ui-component')
			});
			$('.btn-disabled-drag').show()
			domConfig.enableGrid() // 开启拖动
		})

		form.on('switch', function(data){
			var id = $(this).data('id')
			if (this.checked) { // 新增widget
				domConfig.addGrid(id)// 新增
			}else { // 删除
				domConfig.domRemove(id)
			}
		})
	})

})



// iframe外部控制frame 内容页面跳转↓
// 写在外部的js逻辑里
//window.frames.location.href="http://localhost:8090/dashboard3.html"

// iframe 内部页面跳转↓
// 直接写在iframe内部的逻辑里
// window.location.href="http://localhost:8090/dashboard3.html"

</script>
</html>